<!--
 * @Description: 寝室推广列表 - 添加公司弹窗
 * @Author: liyujie
 * @Date: 2021/04/09
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/04/09
-->

<template>
    <section class="wrapper">
        <el-dialog
            :title="type === 'add' ? '新建推广批次' : type === 'edit' ? '编辑推广批次' : '查看推广批次'"
            width="780px"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            @close="handleClose"
        >
            <div class="form-wrapper">
                <el-form
                    class="base-info contract"
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-position="right"
                    label-width="124px"
                >
                    <div class="company-list">
                        <div
                            class="company-item"
                            v-for="(item, index) in ruleForm.company_list"
                            :key="index"
                        >
                            <div class="company-header">
                                <div class="company-header-title">
                                    公司信息{{ index + 1 }}
                                </div>
                                <div>
                                    <el-button
                                        type="text"
                                        @click="deleteCompany(index)"
                                    >
                                        删除
                                    </el-button>
                                </div>
                            </div>
                            <div class="company-content">
                                <el-form-item
                                    label="公司名称"
                                    label-width="68px"
                                    :prop="`company_list[${index}].hire_no`"
                                    :rules="rules.hire_no"
                                >
                                    <el-select
                                        v-model="item.hire_no"
                                        filterable
                                        remote
                                        clearable
                                        size="medium"
                                        style="width: 360px;"
                                        reserve-keyword
                                        placeholder="请输入公司名称"
                                        :remote-method="remoteMethod"
                                        :loading="filterLoading"
                                        :disabled="type !== 'add' && item.disabled"
                                        @change="getMaxSeriesIndex($event, index)"
                                    >
                                        <el-option
                                            v-for="option in suggestList"
                                            :key="option.hire_no"
                                            :label="option.company_name"
                                            :value="option.hire_no"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="推广批次"
                                    label-width="68px"
                                    :prop="`company_list[${index}].series_index`"
                                    :rules="rules.series_index"
                                >
                                    <el-input
                                        v-model="item.series_index"
                                        size="medium"
                                        clearable
                                        style="width: 360px"
                                        :disabled="type !== 'add' && item.disabled"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="产品名称"
                                    label-width="68px"
                                    :prop="`company_list[${index}].series_title`"
                                    :rules="rules.series_title"
                                >
                                    <el-input
                                        v-model="item.series_title"
                                        size="medium"
                                        clearable
                                        style="width: 360px"
                                        :disabled="type === 'detail'"
                                    />
                                </el-form-item>
                            </div>
                        </div>
                        <div
                            class="add-button"
                            @click="addCompany"
                        >
                            继续添加
                        </div>
                    </div>
                </el-form>
                <div class="btn">
                    <el-button
                        size="medium"
                        style="width: 120px;margin-right: 32px"
                        @click="dialogVisible = false"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        style="width: 120px"
                        :loading="loading"
                        v-if="type !== 'detail'"
                        @click="handleSubmit"
                    >
                        确认
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        style="width: 120px"
                        v-if="type === 'detail'"
                        @click="type = 'edit'"
                    >
                        修改
                    </el-button>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :visible.sync="resultDialog"
            width="396px"
            :close-on-click-modal="false"
            :show-close="false"
            custom-class="confirm-dialog"
        >
            <div class="icon">
                <i :class="`el-icon-success`"/>
            </div>
            <div class="title">
                操作成功
            </div>
            <div class="message">
                <template v-if="create_series">
                    推广批次已成功创建，<router-link
                        to="/bid/dorm-video-list"
                        style="color: #409EFF"
                    >寝室视频上传列表</router-link>同步创建了此条记录
                </template>
                <template v-else>
                    推广批次已成功创建，<router-link
                        to="/bid/dorm-video-list"
                        style="color: #F56C6C"
                    >寝室视频上传列表</router-link>已有此条记录， 因此不会在<router-link
                        to="/bid/dorm-video-list"
                        style="color: #F56C6C"
                    >
                        寝室视频上传列表
                    </router-link>同步创建此条记录
                </template>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="resultDialog = false"
                >
                    确定
                </el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
import { deepClone } from "@/assets/js/utils";

let company_item = {
    // 商家编号
    hire_no: '',
    // 推广批次
    series_index: '',
    // 产品名称
    series_title: ''
};

export default {
    name: "AddCompanyDialog",
    data() {
        return {
            type: 'add',
            dialogVisible: false,
            resultDialog: false,
            loading: false,
            filterLoading: false,
            ruleForm: {
                series_no: '',
                company_list: [deepClone(company_item)]
            },
            rules: {
                hire_no: [
                    {required: true, message: '请选择公司', trigger: 'change'}
                ],
                series_index: [
                    {required: true, message: '请填写推广批次', trigger: 'blur'},
                    {pattern: /^\d{1,}$/, message: '推广批次必须为数字', trigger: 'blur'}
                ],
                series_title: [
                    {required: true, message: '请填写产品名称', trigger: 'blur'}
                ],

            },
            // 公司列表
            suggestList: [],
            // 是否创建了新批次
            create_series: 0
        };
    },
    mounted() {
        this.getSuggest();
    },
    methods: {
        /**
         * 显示弹窗
         * @param type - edit编辑 add新增
         * @param data
         */
        show(type = 'add', data) {
            this.type = type;
            this.ruleForm.series_no = data.series_no;
            this.getSuggest();
            this.dialogVisible = true;
        },

        /**
         * 提交
         */
        handleSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if(valid) {
                    this.loading = true;
                    let params = deepClone(this.ruleForm);

                    params.hire_link_list = JSON.stringify(params.company_list);
                    delete params.company_list;
                    this.$post('/student/room_series%5Cset_link_hire',params, resp => {
                        if(resp.code === 1) {
                            this.dialogVisible = false;
                            if(this.type === 'add') {
                                // this.create_series = resp.data.create_series;
                                // this.resultDialog = true;
                                this.$notify({
                                    title: '提示',
                                    message: '添加成功',
                                    type: 'success',
                                    duration: 2000
                                });
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: '保存成功',
                                    type: 'success',
                                    duration: 2000
                                });
                            }
                            this.$emit('update');
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                        this.loading = false;
                    });
                }
            });
        },

        /**
         * 弹窗关闭 重置表单
         */
        handleClose() {
            this.ruleForm.company_list = [deepClone(company_item)];
            this.type = 'add';
            this.$refs.ruleForm.clearValidate();
        },

        /**
         * @description 搜索商家名称
         */
        remoteMethod (query) {
            if (query !== '') {
                this.filterLoading = true;
                setTimeout(() => {
                    this.filterLoading = false;
                    this.getSuggest(query);
                }, 200);
            }
        },

        /**
         * @description 获取商家列表
         */
        getSuggest (keyword) {
            this.$post('/student/room_series%5Cget_company_list', {
                keyword: keyword
            }, resp => {
                if (resp.code === 1) {
                    this.suggestList = resp.data.list;
                }
            });
        },

        /**
         * 添加公司
         */
        addCompany() {
            this.ruleForm.company_list.push(deepClone(company_item));
        },

        /**
         * 删除公司
         * @param index
         */
        deleteCompany(index) {
            if(this.ruleForm.company_list.length <= 1) {
                this.$message.warning('至少保留一个');
                return;
            }
            this.ruleForm.company_list.splice(index, 1);
        },

        /**
         * 获取公司最大批次
         * @param hire_no
         * @param index
         */
        getMaxSeriesIndex(hire_no, index) {
            this.$post('/student/room_series%5Cget_max_series_index', { hire_no }, resp => {
                if (resp.code === 1) {
                    this.ruleForm.company_list[index].series_index = resp.data.series_index + 1;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    .tips {
        color: #999999;
        font-size: 12px;
        margin-left: 12px;
    }
    .line {
        height: 1px;
        background: #ccc;
        margin-bottom: 24px;
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-dialog__body {
        padding: 24px;
        padding-right: 0;
        height: 560px;
        position: relative;
        &::-webkit-scrollbar {
            width: 6px;
        }
    }
    .form-wrapper {
        height: 100%;
        padding-bottom: 78px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }
    }
    .company-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        .company-item {
            width: 512px;
            background: #FAFAFA;
            border-radius: 4px;
            border: 1px solid #EEEEEE;
            margin-bottom: 20px;
            margin-right: 20px;
            .company-header {
                height: 40px;
                background: #F0F0F0;
                border-radius: 4px 4px 0 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 24px;
            }
            .company-content {
                padding: 24px 36px 2px;
            }
        }
        .add-button {
            width: 512px;
            height: 36px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px dashed #20A0FF;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #20A0FF;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-right: 20px;
        }
    }
    .btn {
        margin-top: 36px;
        height: 78px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #DCDFE6;
        background: #fff;
    }
}

/deep/ .confirm-dialog {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    padding: 32px 44px;
    border-radius: 4px;
    .el-dialog__header {
        display: none!important;
    }
    .el-dialog__body {
        padding: 0 24px;
        overflow: hidden!important;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        .icon {
            i {
                font-size: 48px;
            }
            .el-icon-warning {
                color: #FFBB01;
            }
            .el-icon-success {
                color: #2FBDB3;
            }
            .el-icon-error {
                color: #F56C6C;
            }
        }
        .title {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 16px;
            margin-top: 16px;
        }
        .message {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
            margin: 16px 0;
            text-align: center;
        }
    }
    .el-dialog__footer {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        margin-top: 12px;
    }
}
</style>
